import React, { useState, useEffect } from 'react';
import { AppRouter, AppRoute } from '@ice/stark';
// import logo from './logo.svg';
// import './App.css';

const NotFound = <div>404</div>
// const BasicLayout = ({ pathname, children }) => {
//   return (
//     <div>
//       {children}
//     </div>
//   );
// }

const basename = window.SUB_CONTENT_KEY ? `/${window.SUB_CONTENT_KEY}` : ''

const getRoutePath = path => basename ? `${basename}${path}` : path

function App() {
  const [pathname, setPathname] = useState('')

  const handleRouteChange = (pathname) => setPathname(pathname)
  const handleAppEnter = (appEnter) => console.log('渲染子应用：', appEnter.path)
  const handleAppLeave = (appLeave) => console.log('卸载子应用：', appLeave.path)
  
  useEffect(() => {
    console.log(`子应用路由发生变化：${pathname}`);
  }, [pathname]);
  console.log("getRoutePath('/invoice')", getRoutePath('/invoice'))
  return (
    // <BasicLayout pathname={pathname}>
      <AppRouter
        NotFoundComponent={NotFound}
        onRouteChange={handleRouteChange}
        onAppEnter={handleAppEnter}
        onAppLeave={handleAppLeave}
      >
        <AppRoute
          path={getRoutePath('/invoice')}
          title="发票管理"
          url={[
            'http://static.dev.tlwok.com/common/antd.css',
            'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js',
            'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.js',
            'https://cdn.jsdelivr.net/npm/ant-design-vue@1.5.6/dist/antd.min.js',
            'http://localhost:3001/app.js',
            'http://localhost:3001/css/app.css'
          ]}
        />
      </AppRouter>
    // </BasicLayout>
  );
}

export default App;
